<template>
  <div class="dashboard">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="8">
        <el-card class="stat-card card-shadow">
          <div class="stat-content">
            <div class="stat-icon bg-blue">
              <i class="el-icon el-icon-money"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">本月累计回款</div>
              <div class="stat-value">¥ 84,578.32</div>
              <div class="stat-footer">
                <span class="stat-change up">↑ 12.5%</span>
                <span class="stat-label">较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card card-shadow">
          <div class="stat-content">
            <div class="stat-icon bg-green">
              <i class="el-icon el-icon-house"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">房源出租率</div>
              <div class="stat-value">86.5%</div>
              <div class="stat-footer">
                <span class="stat-change up">↑ 3.2%</span>
                <span class="stat-label">较上周</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card card-shadow">
          <div class="stat-content">
            <div class="stat-icon bg-purple">
              <i class="el-icon el-icon-pie-chart"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">回款率</div>
              <div class="stat-value">92.3%</div>
              <div class="stat-footer">
                <span class="stat-change down">↓ 1.1%</span>
                <span class="stat-label">较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 待办事项和工作日历 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="16">
        <el-card class="card-shadow">
          <template #header>
            <div class="card-header">
              <span>监控</span>
              <el-button link>查看详情</el-button>
            </div>
          </template>
          <div class="target-monitor">
            <div class="line-chart-container">
              <v-chart class="chart" :option="rentArrearsOption" autoresize />
            </div>
          </div>
        </el-card>

        <el-card class="card-shadow" style="margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span>监控</span>
              <el-button link>查看详情</el-button>
            </div>
          </template>
          <div class="target-monitor">
            <div class="pie-chart-container">
              <v-chart class="chart" :option="pieChartOption" autoresize />
            </div>
            <div class="risk-statistics">
              <div class="risk-item" v-for="(item, index) in riskStats" :key="index">
                <div class="risk-icon" :class="item.class">
                  <i class="el-icon" :class="item.icon"></i>
                </div>
                <div class="risk-info">
                  <div class="risk-label">{{ item.label }}</div>
                  <div class="risk-number">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card card-shadow">
          <div class="stat-content">
            <div class="stat-icon bg-yellow">
              <i class="el-icon el-icon-house"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">服务产出率</div>
              <div class="stat-value">86.5%</div>
              <div class="stat-footer">
                <span class="stat-change up">↑ 3.2%</span>
                <span class="stat-label">较上周</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="card-shadow" style="margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span>工作日历</span>
              <el-button link @click="addEvent">+ 添加事件</el-button>
            </div>
          </template>
          <div class="calendar-container">
            <el-calendar v-model="calendarValue">
              <template #date-cell="{ data }">
                <div class="calendar-day">
                  <div class="calendar-date">{{ data.day.split("-")[2] }}</div>
                  <div class="calendar-events">
                    <div
                      v-for="event in getEventsForDate(data.day)"
                      :key="event.id"
                      class="calendar-event"
                      :class="event.type"
                      :title="event.title"
                    >
                      {{
                        event.title.length > 6
                          ? event.title.substring(0, 6) + "..."
                          : event.title
                      }}
                    </div>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据监控和回款趋势 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="8">
        <el-card class="chart-card card-shadow">
          <template #header>
            <div class="card-header">
              <span>本月回款趋势</span>
              <div class="chart-actions">
                <el-radio-group v-model="chartType" size="mini">
                  <el-radio-button label="bar">柱状图</el-radio-button>
                  <el-radio-button label="line">折线图</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="trendChartOption" autoresize />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="dashboard-card card-shadow">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-tag type="danger">紧急</el-tag>
            </div>
          </template>
          <div class="todo-container">
            <div class="todo-item" v-for="(item, index) in todoList" :key="index">
              <div class="todo-icon" :class="item.iconClass">
                <i class="el-icon" :class="item.icon"></i>
              </div>
              <div class="todo-content">
                <div class="todo-title">{{ item.title }}</div>
                <div class="todo-meta">
                  <span class="todo-count">{{ item.count }}</span>
                  <span class="todo-time">{{ item.time }}</span>
                </div>
              </div>
              <div class="todo-action">
                <el-button size="small" type="primary" plain @click="handleTodo(item)"
                  >处理</el-button
                >
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="monitor-card card-shadow">
          <template #header>
            <div class="card-header">
              <span>数据监控</span>
              <el-dropdown>
                <el-button link>
                  更多 <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>今日数据</el-dropdown-item>
                    <el-dropdown-item>本周数据</el-dropdown-item>
                    <el-dropdown-item>本月数据</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          <div class="monitor-list">
            <div v-for="(item, index) in monitorList" :key="index" class="monitor-item">
              <div class="monitor-header">
                <div class="monitor-name">{{ item.name }}</div>
                <div class="monitor-status">
                  <i class="el-icon el-icon-success"></i>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="monitor-body">
                <div class="monitor-data">
                  <div class="data-label">今日回款</div>
                  <div class="data-value">
                    {{ item.todayRepayment }}户 | {{ item.repaymentAmount }}万元
                  </div>
                </div>
                <div class="monitor-data">
                  <div class="data-label">今日新增</div>
                  <div class="data-value">
                    {{ item.newCases }}户 | {{ item.newAmount }}万元
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart, BarChart, PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  PolarComponent,
} from "echarts/components";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  PolarComponent,
]);

// 图表类型
const chartType = ref("bar");

// 待办事项列表
const todoList = ref([
  {
    title: "收取回款",
    count: "12 条",
    time: "今日",
    icon: "el-icon-money",
    iconClass: "bg-blue-light",
  },
  {
    title: "待分配案件",
    count: "46 条",
    time: "今日",
    icon: "el-icon-document",
    iconClass: "bg-orange-light",
  },
  {
    title: "待审核对账",
    count: "58 条",
    time: "今日",
    icon: "el-icon-folder",
    iconClass: "bg-green-light",
  },
  {
    title: "待审核减免",
    count: "23 条",
    time: "明日",
    icon: "el-icon-check",
    iconClass: "bg-purple-light",
  },
]);

// 风险统计数据
const riskStats = ref([
  {
    label: "高风险",
    value: "13",
    icon: "el-icon-warning",
    class: "bg-red",
  },
  {
    label: "中风险",
    value: "34",
    icon: "el-icon-bell",
    class: "bg-orange",
  },
  {
    label: "低风险",
    value: "5",
    icon: "el-icon-info",
    class: "bg-yellow",
  },
]);

// 房源出租率图表配置
const rentRateChartOption = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["出租率"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}%",
      },
    },
    series: [
      {
        name: "出租率",
        type: "line",
        stack: "总量",
        data: [85, 92, 88, 90, 95, 87, 89],
        areaStyle: {},
        smooth: true,
        itemStyle: {
          color: "#409eff",
        },
      },
    ],
  };
});

// 回款率图表配置
const repaymentRateChartOption = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["回款率"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}%",
      },
    },
    series: [
      {
        name: "回款率",
        type: "line",
        stack: "总量",
        data: [78, 82, 85, 80, 88, 90],
        areaStyle: {},
        smooth: true,
        itemStyle: {
          color: "#67c23a",
        },
      },
    ],
  };
});

// 本月回款趋势图表配置
const trendChartOption = computed(() => {
  const isBar = chartType.value === "bar";

  return {
    title: {
      text: "本月回款趋势",
      textStyle: {
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["本月累计回款金额", "每日回款金额"],
      textStyle: {
        fontSize: 12,
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "2020.06.01",
        "2020.06.06",
        "2020.06.12",
        "2020.06.18",
        "2020.06.24",
        "2020.06.30",
      ],
      axisLabel: {
        fontSize: 12,
      },
    },
    yAxis: {
      type: "value",
      name: "万元",
      axisLabel: {
        formatter: "{value}万元",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "本月累计回款金额",
        type: isBar ? "bar" : "line",
        barWidth: "30%",
        data: [2.0, 2.5, 2.0, 2.5, 3.0, 4.0],
        itemStyle: {
          color: "#409eff",
        },
        smooth: !isBar,
      },
      {
        name: "每日回款金额",
        type: isBar ? "bar" : "line",
        barWidth: isBar ? "30%" : undefined,
        data: [1.5, 2.0, 1.0, 1.5, 2.0, 2.5],
        itemStyle: {
          color: "#67c23a",
        },
        smooth: !isBar,
        areaStyle: isBar ? undefined : { opacity: 0.3 },
      },
    ],
  };
});

// 监控饼图配置
const pieChartOption = computed(() => {
  return {
    title: {
      textStyle: {
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "left",
      data: ["正常", "异常", "高风险", "中风险", "低风险"],
      textStyle: {
        fontSize: 12,
      },
    },
    series: [
      {
        name: "风险等级",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "14",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 30, name: "正常" },
          { value: 40, name: "异常" },
          { value: 13, name: "高风险" },
          { value: 34, name: "中风险" },
          { value: 5, name: "低风险" },
        ],
        roseType: "radius",
      },
    ],
  };
});

// 日历相关
const calendarValue = ref(new Date());
const events = ref([
  {
    id: 1,
    date: new Date().toISOString().slice(0, 10),
    title: "收取回款",
    type: "payment",
  },
  {
    id: 2,
    date: new Date(Date.now() + 86400000).toISOString().slice(0, 10),
    title: "客户会议",
    type: "meeting",
  },
  {
    id: 3,
    date: new Date(Date.now() + 172800000).toISOString().slice(0, 10),
    title: "季度总结",
    type: "summary",
  },
]);

// 获取指定日期的事件
const getEventsForDate = (date) => {
  return events.value.filter((event) => event.date === date);
};

// 监控列表数据
const monitorList = ref([
  {
    name: "量化派",
    status: "8/10",
    todayRepayment: "5,400",
    repaymentAmount: "2,238.2",
    newCases: "100",
    newAmount: "8.2",
  },
  {
    name: "现金巴士",
    status: "8/10",
    todayRepayment: "100",
    repaymentAmount: "8.2",
    newCases: "100",
    newAmount: "8.2",
  },
  {
    name: "现金巴士",
    status: "8/10",
    todayRepayment: "100",
    repaymentAmount: "8.2",
    newCases: "100",
    newAmount: "8.2",
  },
]);

// 处理待办事项
const handleTodo = (item) => {
  console.log("处理待办事项:", item);
};

// 添加事件
const addEvent = () => {
  console.log("添加新事件");
};

// 欠缴趋势分析图表配置
const rentArrearsOption = computed(() => {
  return {
    title: {
      text: "租金欠缴趋势分析",
      textStyle: {
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      formatter: function (params) {
        let result = params[0].axisValue + "<br/>";
        params.forEach((item) => {
          let marker = item.marker;
          let value = item.seriesName.includes("金额")
            ? item.value + "万元"
            : item.value + "户";
          result += marker + item.seriesName + ": " + value + "<br/>";
        });
        return result;
      },
    },
    legend: {
      data: ["欠缴租户数", "累计欠缴金额"],
      right: 10,
      top: 10,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1个月内", "1-3个月", "3-6个月", "6-12个月", "12个月以上"],
      axisLabel: {
        fontSize: 12,
      },
    },
    yAxis: [
      {
        type: "value",
        name: "租户数",
        position: "left",
        axisLabel: {
          formatter: "{value}户",
        },
      },
      {
        type: "value",
        name: "欠缴金额",
        position: "right",
        axisLabel: {
          formatter: "{value}万元",
        },
      },
    ],
    series: [
      {
        name: "欠缴租户数",
        type: "line",
        smooth: true,
        data: [30, 25, 15, 8, 3],
        itemStyle: {
          color: "#409EFF",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "rgba(64,158,255,0.2)" },
              { offset: 1, color: "rgba(64,158,255,0.01)" },
            ],
          },
        },
      },
      {
        name: "累计欠缴金额",
        type: "line",
        yAxisIndex: 1,
        smooth: true,
        data: [15.2, 35.8, 68.3, 92.1, 108.5],
        itemStyle: {
          color: "#67C23A",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "rgba(103,194,58,0.2)" },
              { offset: 1, color: "rgba(103,194,58,0.01)" },
            ],
          },
        },
      },
    ],
  };
});
</script>

<style scoped>
.dashboard {
  padding: 20px;
  min-height: calc(100vh - 84px);
}

/* 卡片通用样式 */
.card-shadow {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: none;
  transition: all 0.3s ease;
}

.card-shadow:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 统计卡片样式 */
.stat-card {
  height: 140px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  color: white;
  font-size: 24px;
}

.bg-blue {
  background: linear-gradient(135deg, #409eff, #2979ff);
}

.bg-green {
  background: linear-gradient(135deg, #67c23a, #49b425);
}
.bg-yellow {
  background: linear-gradient(135deg, #e6a23c, #f3d19e);
}
.bg-purple {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-footer {
  display: flex;
  align-items: center;
}

.stat-change {
  font-size: 12px;
  font-weight: bold;
  margin-right: 8px;
}

.stat-change.up {
  color: #67c23a;
}

.stat-change.down {
  color: #f56c6c;
}

.stat-label {
  font-size: 12px;
}

/* 图表卡片样式 */
.chart-card,
.dashboard-card,
.monitor-card {
  max-height: 400px;
}

.chart-container {
  height: 280px;
  width: 100%;
}

.chart {
  height: 100%;
  width: 100%;
}

/* 待办事项卡片样式 */
.todo-container {
  padding: 10px 0;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item:hover {
}

.todo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  font-size: 18px;
}

.bg-blue-light {
  background: linear-gradient(135deg, #409eff, #8cc5ff);
}

.bg-orange-light {
  background: linear-gradient(135deg, #e6a23c, #f3d19e);
}

.bg-green-light {
  background: linear-gradient(135deg, #67c23a, #b3e19d);
}

.bg-purple-light {
  background: linear-gradient(135deg, #9c27b0, #c995e7);
}

.todo-content {
  flex: 1;
  min-width: 0;
}

.todo-title {
  font-size: 15px;
  font-weight: 500;

  margin-bottom: 5px;
}

.todo-meta {
  display: flex;
  justify-content: space-between;
}

.todo-count {
  font-size: 13px;
}

.todo-time {
  font-size: 12px;
}

.todo-action {
  margin-left: 15px;
}

/* 日历样式 */
.calendar-container {
  padding: 10px 0;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.calendar-date {
  font-size: 12px;
  margin-bottom: 4px;
  text-align: center;
}

.calendar-events {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar-event {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 2px;
  padding: 1px 3px;
  margin-bottom: 2px;
  max-width: 90%;
  text-align: center;
}

.calendar-event.payment {
  background-color: #ecf5ff;
  color: #409eff;
}

.calendar-event.meeting {
  background-color: #f0f9eb;
  color: #67c23a;
}

.calendar-event.summary {
  background-color: #fdf6ec;
  color: #e6a23c;
}

/* 数据监控卡片样式 */
.monitor-list {
  padding: 10px 0;
}

.monitor-item {
  margin-bottom: 15px;
  padding: 15px;

  transition: all 0.3s;
  border-bottom: 1px solid #eee;
}

.monitor-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.monitor-name {
  font-size: 15px;
  font-weight: 500;
}

.monitor-status {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #67c23a;
}

.monitor-status i {
  margin-right: 5px;
  font-size: 14px;
}

.monitor-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.monitor-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-label {
  font-size: 13px;
}

.data-value {
  font-size: 14px;
  font-weight: 500;
}

/* 监控样式 */
.target-monitor {
  padding: 10px 0;
}

.pie-chart-container {
  height: 250px;
  width: 100%;
  margin-bottom: 20px;
}

.risk-statistics {
  width: 300px;
  /* display: flex;
  justify-content: space-around; */
  gap: 15px;
  padding: 0 20px;
}

.risk-item {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.3s;
  margin: 10px;
}

.risk-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.risk-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  font-size: 18px;
}

.bg-red {
  background: linear-gradient(135deg, #f56c6c, #ff9c9c);
}

.bg-orange {
  background: linear-gradient(135deg, #e6a23c, #f3d19e);
}

.bg-yellow {
  background: linear-gradient(135deg, #ffd700, #ffec8b);
}

.risk-info {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

.risk-label {
  font-size: 13px;
  margin-bottom: 5px;
}

.risk-number {
  font-size: 20px;
  font-weight: bold;
}

/* 全局样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;

  padding: 15px 20px;
}

.card-header .el-button {
  font-size: 13px;
}

.mb20 {
  margin-bottom: 20px;
}

.chart-actions {
  display: flex;
  align-items: center;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .el-col-8 {
    width: 100%;
    margin-bottom: 20px;
  }

  .el-col-12 {
    width: 100%;
    margin-bottom: 20px;
  }

  .risk-statistics {
    /* flex-direction: column; */
  }

  .risk-item {
    width: 100%;
  }
}

.line-chart-container {
  height: 280px;
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.line-chart-container .chart {
  height: 100%;
  width: 100%;
}

/* 确保图表容器不会太拥挤 */
.target-monitor {
  display: flex;
  /* flex-direction: column; */
  gap: 20px;
}

/* 调整饼图容器的间距 */
.pie-chart-container {
  margin-bottom: 0;
}
</style>
